<template>
    <BaseTable :columns="columns" :data="tableList">
        <template #checkContent="{ scope: { row } }">
            <el-select v-model="row.checkContent" size="mini" placeholder="请选择" style="width: 100%">
                <el-option v-for="m in checkContentOptions" :key="m.id" :label="m.name" :value="m.name" />
            </el-select>
        </template>
        <template #type="{ scope: { row } }">
            <el-select v-model="row.type" size="mini" placeholder="请选择" style="width: 100%" clearable>
                <el-option v-for="m in DefectDiseaseTypeOptions" :key="m.value" :label="m.label" :value="m.label" />
            </el-select>
        </template>
        <template #description="{ scope: { row } }">
            <el-input v-model.trim="row.description" type="textarea" autosize maxlength="200" show-word-limit clearable placeholder="请输入" />
        </template>
        <template #header="{ scope: { column } }">
            <i class="el-icon-info" title="“异常描述”未填写、填写“正常”时，对应记录不生成“缺陷病害”"></i>
            <span> {{ column.label }}</span>
            <BaseButton style="margin-left: 8px;" plain size="mini" @click="handleClick">{{ buttonName }}</BaseButton>
        </template>
        <template #advice="{ scope: { row } }">
            <el-input v-model.trim="row.advice" type="textarea" autosize maxlength="200" show-word-limit placeholder="请输入" class="spe-input" />
        </template>
        <template #remark="{ scope: { row } }">
            <el-input v-model.trim="row.remark" type="textarea" autosize maxlength="200" show-word-limit placeholder="请输入" class="spe-input" />
        </template>
        <template #handle="{ scope: { $index } }">
            <BaseButton v-if="$index === tableList.length - 1" type="text" @click="handleAdd">添加行</BaseButton>
            <BaseButton type="text" :disabled="tableList.length === 1" color="danger" @click="handleDelete($index)">删除</BaseButton>
        </template>
    </BaseTable>
</template>

<script>
// import { mapState } from 'vuex'
import reconfirm from '@/utils/reconfirm'
import { DefectDiseaseTypeOptions } from '@/views/maintenance-decision/constants'
import { DictionaryModel } from '@/models'
const model = new DictionaryModel()

export default {
    name: 'CulvertBridgeTable',
    props: {
        type: {
            type: String,
            default: 'culvert'
        }
    },
    data() {
        return {
            DefectDiseaseTypeOptions,
            buttonName: '全部正常',
            checkContentMap: {
                culvert: 'culvertCheckContentOptions',
                bridge: 'bridgeCheckContentOptions'
            },
            columns: Object.freeze([
                {
                    attrs: {
                        prop: 'number',
                        label: '序号',
                        width: '64',
                        type: 'index'
                    }
                },
                {
                    slot: 'checkContent',
                    attrs: {
                        prop: 'checkContent',
                        label: '检查内容',
                        width: '200'
                    }
                },
                {
                    slot: 'type',
                    attrs: {
                        prop: 'type',
                        label: '上报类型',
                        width: '140'
                    }
                },
                {
                    slot: 'description',
                    headerSlot: 'header',
                    attrs: {
                        prop: 'description',
                        label: '异常描述（性质、范围、程度）',
                        'min-width': '344'
                    }
                },
                {
                    slot: 'advice',
                    attrs: {
                        prop: 'advice',
                        label: '养护措施意见',
                        'min-width': '170'
                    }
                },
                {
                    slot: 'remark',
                    attrs: {
                        prop: 'remark',
                        label: '备注',
                        'min-width': '170'
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '140'
                    }
                }
            ]),
            tableList: [],
            checkContentOptions: []
        }
    },
    created() {
        model.getTypes(this.checkContentMap[this.type].replace('Options', '')).then(data => {
            this.checkContentOptions = data || []
            this.tableList = (data || []).map(item => (
                {
                    checkContent: item.name,
                    locationType: '',
                    location: '',
                    type: '',
                    description: '',
                    unit: '',
                    num: '',
                    disposalResults: '',
                    deviceList: [],
                    remark: ''
                }
            ))
        })
    },
    methods: {
        handleClick() {
            this.buttonName = this.buttonName === '全部正常' ? '取消' : '全部正常'
            if (this.buttonName === '取消') {
                this.tableList.forEach(item => {
                    item.description = '正常'
                })
            } else {
                this.tableList.forEach(item => {
                    item.description = ''
                })
            }
        },
        handleAdd() {
            this.tableList.push({
                checkContent: '',
                locationType: '',
                location: '',
                type: '',
                description: '',
                unit: '',
                num: '',
                disposalResults: '',
                deviceList: [],
                remark: ''
            })
        },
        handleDelete(index) {
            reconfirm({
                isPromise: false,
                callback: () => {
                    this.tableList.splice(index, 1)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.spe-input {
    ::v-deep {
        .el-input__inner {
            padding-right: 50px;
        }
    }
}
</style>
